<template>
  <ul v-if="loading" class="flex justify-between gap-5 pb-2">
    <li
      v-for="i in 4"
      :key="i"
      class="flex-1 enter-x bg-white dark:bg-dark-900 rounded p-4 pt-1 h-[163px]"
    >
      <a-skeleton active />
    </li>
  </ul>
  <ul class="flex justify-between gap-5 pb-2" v-else>
    <li v-for="i in list" class="flex-1 bg-white dark:bg-dark-900 rounded enter-x">
      <header
        class="p-2 py-1.5 border-b border-solid border-gray-300 dark:(text-light-900 border-gray-500)"
      >
        {{ i.title }}
      </header>
      <main class="flex justify-between p-4 py-8 items-center">
        <span class="text-3xl dark:text-light-900">
          {{ i.count }}
        </span>
        <template v-if="i.icon === 'pass'">
          <div class="w-[64px] h-[64px]">
            <img src="@/assets/images/result-pass.png" alt="" />
          </div>
        </template>
        <template v-if="i.icon === 'student'">
          <div class="w-[64px] h-[64px]">
            <img src="@/assets/images/result-student.png" alt="" />
          </div>
        </template>
        <template v-if="i.icon === 'average'">
          <div class="w-[64px] h-[64px]">
            <img src="@/assets/images/result-average.png" alt="" />
          </div>
        </template>
        <template v-if="i.icon === 'err'">
          <div class="w-[64px] h-[64px]">
            <img src="@/assets/images/result-err.png" alt="" />
          </div>
        </template>
      </main>
    </li>
  </ul>
</template>

<script setup lang="ts">
  import { getVariousResultData } from '@/api/user';
  import { VariousResultData } from '@/utils/interface';
  let list = ref<VariousResultData[]>([]);
  let loading = ref(true);
  onMounted(() => {
    getVariousResultData().then(({ data }) => {
      list.value = data;
      loading.value = false;
    });
  });
</script>
